// 颜色
$colors: (
    "blue": #1e9fff,   "primary": #1e9fff,
    "green": #39b54a,  "success": #39b54a,
    "red": #e54d42,    "error": #e54d42,
    "orange": #f37b1d, "warning": #f37b1d,
    "cyan": #1cbbb4,   "info": #1cbbb4,
    "yellow": #fbbd08,
    "olive": #8dc63f,
    "purple": #6739b6,
    "mauve": #9c26b0,
    "pink": #e03997,
    "brown": #a5673f,
    "grey": #8799a3,

    "blue-light": #cce6ff,
    "green-light": #d7f0db,
    "red-light": #fadbd9,
    "orange-light": #fde6d2,
    "yellow-light": #fef4d7,
    "olive-light": #e8f4d9,
    "cyan-light": #d2f1f0,
    "purple-light": #e1d7f0,
    "mauve-light": #ebd4ef,
    "pink-light": #f9d7ea,
    "brown-light": #ede1d9,
    "grey-light": #e7ebed,

    "white": #ffffff,
    "black": #333333,
    "gray": #f0f0f0
);
// 方向
$directions: (
    "top": top,
    "right": right,
    "bottom": bottom,
    "left": left
);
// 大小
$sizes: (
    "xs": 10px,
    "sm": 12px,
    "df": 14px,
    "lg": 16px,
    "xl": 18px,
    "xxl": 22px,
    "xxxl": 26px
);
// 距离
$distances: (
    "0": 0px,
    "xs": 5px,
    "sm": 10px,
    "df": 15px,
    "lg": 20px,
    "xl": 25px,
    "xxl": 30px,
    "xxxl": 35px
);

/* 浮动 */
.clearfix::before, .clearfix::after {
    content: " ";
    display: table;
    clear: both;
    height: 0;
    visibility: hidden;
}
.clearfix {
    *zoom: 1;
}
.fl {
	float: left;
}
.fr {
	float: right;
}

/* 背景颜色 */
.container-bg-light {
    background-color: #F7F8FD;
}
@each $key, $value in $colors {
    .bg-#{$key} {
        background-color: $value;
    }
}

/* 字体颜色 */
@each $key, $value in $colors {
    .text-#{$key} {
        color: $value;
    }
}

/* 字体方向 */
.text-center {
    text-align: center;
}
@each $key, $value in $directions {
    .text-#{$key} {
        text-align: $value;
    }
}
/* 字体样式 */
.font-italic {
    font-style: italic; // 斜体
}
.font-bold {
    font-weight: bold; // 加粗
}
@each $key, $value in $sizes {
    .font-#{$key} {
        font-size: $value;
    }
}

/* 边框 */
.border {
    border: 1px solid map-get($colors, "gray");
}
/* 边框方向 */
@each $key, $value in $directions {
    .border-#{$key} {
        border-#{$value}: 1px solid map-get($colors, "gray");
    }
}
/* 边框颜色 */
@each $key, $value in $colors {
    .border-#{$key} {
        border-color: $value;
    }
}

/* 边距大小 */
.margin {
    margin: map-get($distances, "df");
}
.padding {
    padding: map-get($distances, "df");
}
@each $key, $value in $directions {
    .margin-#{$key} {
        margin-#{$value}: map-get($distances, "df");
    }
    .padding-#{$key} {
        padding-#{$value}: map-get($distances, "df");
    }
}
@each $key, $value in $distances {
    .margin-#{$key} {
        margin: $value;
    }
    @each $key2, $value2 in $directions {
        .margin-#{$key2}-#{$key} {
            margin-#{$value2}: $value;
        }
    }

    .padding-#{$key} {
        padding: $value;
    }
    @each $key2, $value2 in $directions {
        .padding-#{$key2}-#{$key} {
            padding-#{$value2}: $value;
        }
    }
}

/* 圆角大小 */
.round {
    border-radius: 2000px; // 圆角
}
.radius {
    border-radius: map-get($distances, "df");
}
@each $key, $value in $distances {
    .radius-#{$key} {
        border-radius: $value;
    }
}
